<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>绿叶网</title>
        <link rel="stylesheet" href="css/ly.css">
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .clearfixs::after{
                clear: both;
                display: block;
                content: "";
                overflow: hidden;
            }
            #box{
                width: 1100px;
                text-align: left;
                margin: 0 auto;
            }
            #box h2{
                font-size: 16px;
                font-weight: bold;
                padding-left: 10px;
                margin-top: 30px;
                margin-bottom: 8px;
                border-left: 4px solid #69bcf3;
            }
            #box i{
                float: left;
                width: 18px;
                height: 18px;
                font-style: normal;
                line-height: 18px;
                text-align: center;
                margin-top: 9px;
                margin-right: 5px;
                font-size: 12px;
                color: White;
                background-color: silver;
            }
            #box h3{
                height: 36px;
                line-height: 36px;
                font-weight: bold;
                padding-left: 15px;
                padding-right: 15px;
                font-size: 11px;
            }
            #box ul{
                padding-top: 12px;
                border-top: 1px solid #D0D6D9;
                list-style: none;
            }
            #box li{
                float: left;
                overflow: hidden;
                position: relative;
                width: 200px;
                height: 140px;
                background-color: silver;
                margin-left: 25px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }
            #box li:nth-of-type(1){
                margin-left: 0;
            }
            #box li div{
                width: 200px;
                height: 140px;
                transition: all 0.3s;
                position: absolute;
                top: 110px;
                left: 0;
            }
            #box p{
                height: 60px;
                padding-left: 15px;
                padding-right: 15px;
                font-size: 12px;
                color: #333333;
                background-color: White;
            }
            #box li:hover div{
                top:60px;
            }
        </style>
    </head>
    <body>
        <div id="head">
            <div class="head-1">
                <div class="head-1-1 w">
                    <a href="#"></a>
                    <ul>
                        <li>
                            <div>
                                <span>首页</span>
                                <span></span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <span>站长的书</span>
                                <span></span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <span>前端入门</span>
                                <span></span>
                            </div>
                        </li>
                        <li>
                            <div><span>前端进阶</span>
                                <span></span>
                            </div>
                        </li>
                        <li>
                            <div><span>网站设计</span>
                                <span></span>
                            </div>
                        </li>
                        <li>
                            <div><span>在线工具</span>
                                <span></span>
                            </div>
                        </li>
                        <li>
                            <div><span>我要出书</span>
                                <span></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="head-2">
                <a href="#" class="w" style="background: url('http://www.lvyestudy.com/App_images/index/banner5.jpg') center center no-repeat;"></a>
                <span><i class="left"><</i></span>
                <span><i class="right">></i></span>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        <div class="body-1 w">
            <div class="body-1-1">
                <h2>工具手册</h2>
                <ul>
                    <li>
                        <span>HTML5参考手册</span>
                        <span class="dd">HTML5参考手册</span>
                    </li>
                    <li>
                        <span>HTML5参考手册</span>
                        <span>HTML5参考手册</span>
                    </li>
                    <li>
                        <span>HTML5参考手册</span>
                        <span>HTML5参考手册</span>
                    </li>
                    <li>
                        <span>HTML5参考手册</span>
                        <span>HTML5参考手册</span>
                    </li>
                    <li>
                        <span>HTML5参考手册</span>
                        <span>HTML5参考手册</span>
                    </li>
                    <li>
                        <span>HTML5参考手册</span>
                        <span>HTML5参考手册</span>
                    </li>
                    <li>
                        <span>HTML5参考手册</span>
                        <span>HTML5参考手册</span>
                    </li>
                    <li>
                        <span>HTML5参考手册</span>
                        <span>HTML5参考手册</span>
                    </li>
                </ul>
            </div>
            <div class="body-1-2">
                <ul class="body-1-2-1">
                    <li>
                        <p style="background: rgba(145,220,255,0.6) "><b>站长新书</b><br>HTML和CSS进阶</p>
                        <img src="http://www.lvyestudy.com/App_images/index/big_front.png" alt="" style="width:190px;height:130px;">
                    </li>
                    <li>
                        <p class="small">HTML</p>
                        <img src="http://www.lvyestudy.com/App_images/index/small_front.png" alt="" class="big">
                    </li>
                    <li>
                        <p class="small">CSS</p>
                        <img src="http://www.lvyestudy.com/App_images/index/small_front.png" alt="" class="big">
                    </li>
                    <li>
                        <p class="small">JavaScript</p>
                        <img src="http://www.lvyestudy.com/App_images/index/small_front.png" alt="" class="big">
                    </li>
                    <li>
                        <p class="small">jQuery</p>
                        <img src="http://www.lvyestudy.com/App_images/index/small_front.png" alt="" class="big">
                    </li>
                    <li>
                        <p class="small">CSS3</p>
                        <img src="http://www.lvyestudy.com/App_images/index/small_front.png" alt="" class="big">
                    </li>
                    <li>
                        <p class="small">正则</p>
                        <img src="http://www.lvyestudy.com/App_images/index/small_front.png" alt="" class="big">
                    </li>
                    <li>
                        <p style="background: rgba(145,220,255,0.6); "><b>站长处女作</b><br>HTML和CSS基础</p>
                        <img src="http://www.lvyestudy.com/App_images/index/big_front.png" alt="" style="width:190px;height:130px;">
                    </li>
                    <li>
                        <p class="small">JSON</p>
                       <img src="http://www.lvyestudy.com/App_images/index/small_front.png" alt="" class="big">
                    </li>
                    <li>
                        <p class="small">技巧</p>
                        <img src="http://www.lvyestudy.com/App_images/index/small_front.png" alt="" class="big">
                    </li>
                    <li>
                        <p class="small" style="background: url('http://www.lvyestudy.com/App_images/index/middle_back.png')">绿叶2.0正式上线</p>
                        <img src="http://www.lvyestudy.com/App_images/index/middle_front.png" alt="" style="width:190px;height:60px;" class="big">
                    </li>
                </ul>
                <ul class="body-1-2-2 clearfix">
                    <li>
                        <a href="#">
                            <span></span>
                            <img src="http://www.lvyestudy.com/App_images/index/run_code.png" alt="">
                            <p>在线测试</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span></span>
                            <img src="http://www.lvyestudy.com/App_images/index/color_picker.png" alt="">
                            <p>在线调色板</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span></span>
                            <img src="http://www.lvyestudy.com/App_images/index/json.png" alt="">
                            <p>JSON格式化</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span></span>
                            <img src="http://www.lvyestudy.com/App_images/index/regex.png" alt="">
                            <p>正则测试</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span></span>
                            <img src="http://www.lvyestudy.com/App_images/index/border_radius.png" alt="">
                            <p>CSS3圆角</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span></span>
                            <img src="http://www.lvyestudy.com/App_images/index/md5.png" alt="">
                            <p>MD5加密</p>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="body-1-3">
                <h2>最新动态</h2>
                <ul>
                    <li style="border-top-style: solid">
                        <p>绿叶第一本教材正式出版啦！</p>
                    </li>
                    <li>
                        <p>绿叶第一本教材正式出版啦！</p>
                    </li>
                    <li>
                        <p>绿叶第一本教材正式出版啦！</p>
                    </li>
                    <li>
                        <p>绿叶第一本教材正式出版啦！</p>
                    </li>
                    <li>
                        <p>绿叶第一本教材正式出版啦！</p>
                    </li>
                    <li>
                        <p>绿叶第一本教材正式出版啦！</p>
                    </li>
                    <li>
                        <p>绿叶第一本教材正式出版啦！</p>
                    </li>
                    <li>
                        <p>绿叶第一本教材正式出版啦！</p>
                    </li>
                </ul>
            </div>
        </div>
        <div id="box">
            <h2>前端入门</h2>
            <ul class="clearfixs">
                <li>
                    <img src="img/1.png" alt="">
                    <div>
                        <h3><i>初</i>HTML入门教程</h3>
                        <p>50000+互联网读者点击学习，超高人气在线教程</p>
                    </div>
                </li>
                <li>
                    <img src="img/2.png" alt="">
                    <div>
                        <h3><i>初</i>CSS入门教程</h3>
                        <p>互联网公认最好的CSS入门教程，没有之一。</p>
                    </div>
                </li>
                <li>
                    <img src="img/3.png" alt="">
                    <div>
                        <h3><i>初</i>JavaScript入门教程</h3>
                        <p>20000+互联网读者的选择，专门针对没有编程基础的小伙伴</p>
                    </div>
                </li>
                <li>
                    <img src="img/4.png" alt="">
                    <div>
                        <h3><i>初</i>jQuery入门教程</h3>
                        <p>一个比市面上绝大多数jQuery书籍还要好的精品教程</p>
                    </div>
                </li>
                <li>
                    <img src="img/5.png" alt="">
                    <div>
                        <h3><i>初</i>Sass教程</h3>
                        <p>国内少有的Sass教程，极大提高开发效率的利器</p>
                    </div>
                </li>
            </ul>
        </div>
        <!--用于解决页面刷新产生过度效果-->
        <script>
            ;
        </script>
    </body>
</html>